<script setup>
import { ref } from 'vue';

// 1. 把简单数据变成响应式数据, 得用ref()函数
const pName = ref('张三')
console.log(pName.value)
pName.value = '张学友'

// 2. 把复杂数据变成响应式数据, 也可以用ref函数转成响应式
const person = ref({
  name: '刘德虎',
  age: 18,
  sex: '男'
})
person.value.name = 'xxxxxxxx'

</script>

<template>
  <div>
    <!-- 注意: 在模板中使用, 省略.value -->
    <p>姓名: {{ pName }}</p>
    <button @click="pName = '刘德虎'">改名</button>
    <hr>
    <p>姓名: {{ person.name }}, 年龄: {{ person.age }}, 性别: {{ person.sex }}</p>
    <button @click="person.sex = '女'">修改</button>
  </div>
</template>

<style scoped></style>
